
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	template="../vue/template.xhtml"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core">

	<ui:define name="banniere">
		<h2>Recipes</h2>
	</ui:define>

	<ui:define name="content">
		<h:form>
			<p:panel header="Tell what you want">
				<h:panelGrid id="grid" columns="2" cellpadding="5">
					<h:outputLabel for="duration" value="Preparation duration " />
					<p:spinner id="duration" value="#{searchRecipesBean.time}" />
				</h:panelGrid>

				<h:panelGrid columns="1" style="margin-bottom:10px">
					<h:outputText id="output"
						value="For how many people : #{searchRecipesBean.number}" />
					<h:inputHidden id="txt2" value="#{searchRecipesBean.number}" />
					<p:slider for="txt2" display="output" style="width:200px"
						displayTemplate="For how many people : {value}" minValue="1" maxValue="12" />
				</h:panelGrid>

				<h:panelGrid columns="2" cellpadding="5">
					<h:outputText value="Cook expertise :" />
					<p:rating value="#{searchRecipesBean.expertise}" stars="5"
						cancel="false" />
				</h:panelGrid>

				<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
					<h:outputText value="Basic Usage: " />
					<p:selectOneMenu value="#{searchRecipesBean.usage}">
						<f:selectItem itemLabel="Select One" itemValue="" />
						<f:selectItem itemLabel="Option 1" itemValue="1" />
						<f:selectItem itemLabel="Option 2" itemValue="2" />
						<f:selectItem itemLabel="Option 3" itemValue="3" />
					</p:selectOneMenu>
				</h:panelGrid>
			</p:panel>
			
			<h:commandButton value="Teach me"
								action="#{searchRecipeBeanController.seachRecipe(searchRecipesBean)}" />
		</h:form>
	</ui:define>
</ui:composition>